<#setting number_format=",###.###">
<style  type="text/css" id="printStyle">

#pageHead,#printHead,#tableArea,#remark,#printFooter,#pageFooter,pre,p{
    font-family: Times New Roman;
    line-height: 22px;
    font-size: 12px;
}

td,tr,talbe {
	margin: 0;
	padding: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	border-spacing: 0 !important;
	*border-collapse: expression('separate', cellSpacing =   '0px');/
	border-spacing: expression(this.cellSpacing = 0);
}

td,th {
	display: table-cell;
	vertical-align: inherit;
}

table th,table td {
	text-align: left;
}

.printTable {
	width: 100%;
	margin: 0;
	padding: 0;
}

.printTable td, div{
	word-wrap:break-word;
    word-break:break-all;
}

.printTable tr {
	width: 100%;
}
.printLine td{
    font-weight: bold;
}
.printTable .printLine td {
	line-height: 30px;
	border-top: 1px solid gray;
	border-bottom: 1px solid gray;
}
</style>
<div id="pageHead" style="width: 740px;">
    <div style="height: 100px">
        <div style="width: 180px;float: left;">
            <img alt="" src="${staticDomain}images/system/logo/${entity.company.logo}" width="180" height="84"/>
        </div>
        <div style="line-height: 30px; font-size:${fontSize}em;font-weight:bolder; text-align: center;width:620px;float: left;margin-left:100px;margin-top: -80px;">${entity.company.name}</div>
        <div style="line-height: 30px; text-align: center;font-size:${fontSize-0.2}em;width:400px;float: right;margin: -30px 115px 0;">Order Confirmation</div>
    </div>  
</div>
<div id="printHead" >
    <table border="0" cellspacing="0" cellpadding="0" width="100%" style="margin-top:15px;">
        <tbody> 
            <tr>
                <td width="3%">To</td>
                <td width="47%">:${entity.customer.name }</td>
                <td width="15%">P/I No.</td>
                <td width="35%">:${entity.orderNo}</td>
            </tr>
            <tr>
                <td style="vertical-align: top;">Add</td>
                <td style="vertical-align: top;">:${entity.customer.address}</td>
                <td>Date</td>
                <td>:${entity.orderDate?string("yyyy-MM-dd")}</td>
            </tr>
            <tr>
                <td>Tel</td>
                <td>:${entity.customer.linkTelephone}</td>
                <td>Sales Condition</td>
                <td>:${entity.salesCondition}</td>
            </tr>
            <tr>
                <td>Fax</td>
                <td>:${entity.customer.fax}</td>
                <td>Shipment</td>
                <td>:${entity.shipment}</td>
            </tr>
            <tr>
                <td rowspan="3" style="vertical-align: top;">Attn</td>
                <td rowspan="3" style="vertical-align: top;">:${entity.customer.linkPerson}</td>
                <td>Payment</td>
                <td>:${entity.payment}</td>
            </tr>
            <tr>
                <td>Client PO No</td>
                <td>:${entity.clientPo}</td>
            </tr>
            <tr>
                <td>ETD Date</td>
                <td>:<#if entity.etdDate??>${entity.etdDate?string("yyyy-MM-dd")}</#if></td>
            </tr>
        </tbody>
    </table>
</div>
<div id="tableArea">
	<table class="printTable" style="margin-top: 15px;">
	   <caption>
	       <div style="line-height: 30px;margin-bottom:15px" align="left">Subject
                to our confirmation on the above terms and conditions: We take
                pleasure in offering you the under mentioned commodities, production
                specification ref Quotation Number:
            </div>
	   </caption>
		<thead>
			<tr class="printLine">
				<td width="15%">Purchase No.</td>
				<td width="10%">Quantity</td>
				<td width="45%">Description</td>
				<td width="15%">Unit Price</td>
				<td width="15%">Amount</td>
			</tr>
		</thead>
		<tbody>
			<#list orderItems as item>
			<tr>
				<td style="text-align: left;">&#160;${item.customerPurchaseNo }</td>
				<td style="text-align: left;">&#160;${item.quantity }</td>
				<td style="text-align: left;">&#160;${item.productDecription }</td>
				<td style="text-align: left;">&#160;${item.unitPrice }</td>
				<td style="text-align: left;">&#160;${item.quantity * item.unitPrice}</td>
			</tr>
			</#list>
			<#list orderCharges as item>
            <tr>
                <td style="text-align: left;" colspan="2"></td>
                <td style="text-align: left;">&#160;${item.chargeName! }</td>
                <td></td>
                <td style="text-align: left;">&#160;${item.charge! }</td>
            </tr>
            </#list>
			<tr class="printLine">
				<td colspan="4"
					style="width: 90%; text-align: right;"><font
					style="font-size: large; font-weight: bold;">TOTAL:</font></td>
				<td style="text-align: left;">&#160;${currency!}${entity.total!}</td>
			</tr>
		</tbody>
	</table>
</div>
<div id="remark">
    <pre style="min-height: 80px;text-align: left;margin-top: 15px;">${entity.remark!}</pre>
</div>
<div id="printFooter">
    <div style="vertical-align: bottom;margin-top:15px;min-height: 120px;">
        <div style="float: left;width: 100%;height: 60px;text-align: left;">
            Confirmed by<br/>
             <div style="float:left;width: 350px;">${entity.customer.name}</div>
             <div style="float:right;width: 350px;text-align: left;">${entity.company.name}</div>
        </div>
        <div style="margin: -60px 0 0 400px; float: left;">
            <img border="0" transcolor="#FFFFFF" src="${staticDomain}images/system/company/${entity.company.officialSeal}"  style="z-index: -1;" />
        </div>
        <div style="margin: 0px 0 0 10px;float: left;width: 100px;">
            <#if auditor??>
	            <#if auditor.remark!="">
	                <img src="${staticDomain}images/system/personal/${auditor.remark}" transcolor="#FFFFFF" style="z-index: -1;">
	            <#else>
	                ${auditor.userName}
	            </#if>
	        </#if>
        </div>
    </div>
</div>